<template>
    <view class="wai">
        <!-- 海报 -->
        <canvas canvas-id="posterCanvas" :style="'height:' + highta + 'px'" style="width: 100%"></canvas>
        <!--   <view class="pojaib">
      <image class="image" :src="backimg" mode=""></image>
      <image :style="'top: ' + top + '%; left: ' + left + '%;'" :src="er2" class="erweima" mode=""></image>
    </view> -->
        <!-- 图标 -->
        <view class="icon-box">
            <view class="icon-items" @click="toRewards">
                <image src="@/static/save.png" class="item-picture" mode=""></image>
                <view class="">分销中心</view>
            </view>
            <view class="icon-items" @click="btn">
                <!-- 分享按钮修改版 -->
                <button style="width: 200rpx; background-color: transparent; font-size: 12px" open-type="share" class="publish">
                    <view class="share-box">
                        <image src="@/static/share.png" style="width: 60rpx; height: 50rpx" mode=""></image>
                        <view style="margin-top: 26rpx">分享</view>
                    </view>
                </button>
            </view>
            <view class="icon-items" @click="xiazi">
                <image src="@/static/download.png" class="item-picture" mode=""></image>
                <view class="">下载海报</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tuigId: '', //推广id
            er2: '', //二维码图片
            backimg: '', //背景图片
            top: '', //二维码位置
            left: '', //二维码位置
            highta: ''
        };
    },
    onShow() {
        this.tuigId = this.app.id; //获取推广id
    },
    async onLoad() {
        await this.erweim(); //获取二维码
        await this.getAssets(); //获取推广配置

        // this.createPosterAndSave();
    },
    mounted() {},
    // 小程序点击分享给微信好友
    onShareAppMessage(res) {
        if (res.from === 'button') {
            var that = this;
            this.tuigId = that.app.id; //邀请上级的id
            // 来自页面内分享按钮
            console.log(this.tuigId);
            console.log(12312321);
        }
        // 携带邀请上级的id让他进注册页这样就能获取到下属列表
        return {
            title: '邀请有礼',
            path: `/pages/login/register?referee=${this.tuigId}`,
            imageUrl: '/static/zsk.png'
        };
    },
    methods: {
        getImageInfoa() {
            console.log(78946);
            uni.getImageInfo({
                src: this.backimg,
                success: (res) => {
                    console.log(res);
                    this.backimg = res.path;
                    this.createPosterAndSave();
                },
                fail: (err) => {
                    console.log(err);
                }
            });
        },
        getImageInfob() {
            uni.getImageInfo({
                src: this.er2,
                success: (res) => {
                    console.log(res);
                    this.er2 = res.path;
                    this.createPosterAndSave();
                },
                fail: (err) => {
                    console.log(err);
                }
            });
        },
        // 生成海报
        async createPosterAndSave() {
            const ctx = uni.createCanvasContext('posterCanvas', this);
            const systemInfo = uni.getSystemInfoSync();
            console.log(9999, systemInfo);
            const screenHeight = systemInfo.screenHeight - 200; //获取屏幕高度
            const screenWidth = systemInfo.windowWidth; //获取屏幕宽度，这样不管什么机型都能铺满
            // 绘制背景图
            // const backgroundImage = 'https://uapi.zheshouka.com/qrcode/qrcode-199.png'; // 替换为你的图片路径
            const canvasWidth = screenWidth; // canvas的宽度  背景图的宽度
            this.highta = screenHeight; //给高度设置属性，不然下载的时候高度会有空白
            // 注意：这里我们直接设置背景图的宽度为canvas宽度，高度则拉伸或裁剪以适应canvas高度
            ctx.drawImage(this.backimg, 0, 0, canvasWidth, screenHeight);
            // ctx.drawImage(backgroundImage, 0, 0, canvasWidth, canvasHeight);
            // 绘制二维码图片（放在背景图中间）
            const qrcodeImage = this.er2; // 替换为你的二维码图片路径
            const qrcodeWidth = 130; // 二维码宽度
            const qrcodeHeight = 130; // 二维码高度
            // 计算二维码在背景图中间的坐标
            // const qrcodeX = (canvasWidth - qrcodeWidth) / 2;
            // const qrcodeY = (screenHeight - qrcodeHeight) / 2;
            const qrcodeX = (canvasWidth - this.top) / 2;
            const qrcodeY = (screenHeight - this.left) / 2;
            ctx.drawImage(qrcodeImage, qrcodeX, qrcodeY, qrcodeWidth, qrcodeHeight);
            // 绘制完成
            ctx.draw(true);
        },

        // 下载二维码
        xiazi() {
            uni.canvasToTempFilePath({
                canvasId: 'posterCanvas',
                success: (res) => {
                    const tempFilePath = res.tempFilePath;
                    // 保存图片到相册
                    uni.saveImageToPhotosAlbum({
                        filePath: tempFilePath,
                        success: () => {
                            uni.showToast({ title: '已保存到相册', icon: 'success' });
                        },
                        fail: (err) => {
                            uni.showToast({ title: '保存失败', icon: 'none' });
                            console.error(err);
                        }
                    });
                },
                fail: (err) => {
                    console.error(err);
                }
            });
        },
        // 获取二维码
        erweim() {
            var that = this;
            uni.request({
                url: that.app.apiHost + `/getQrCode`,
                method: 'GET',
                header: { Authorization: 'bearer ' + that.app.getAuthCode() },
                success: (res) => {
                    this.er2 = res.data.data.qrcode;
                    this.getImageInfob();
                },
                fail(res) {}
            });
        },
        // 推广配置
        getAssets() {
            var that = this;
            uni.request({
                url: that.app.apiHost + `/getAssetsConfig`,
                method: 'GET',
                header: { Authorization: 'bearer ' + that.app.getAuthCode() },
                success: (res) => {
                    this.backimg = res.data.data.backimg; //背景图片
                    this.left = res.data.data.xnum;
                    this.top = res.data.data.ynum;
                    this.getImageInfoa();
                    console.log(8888999, res.data.data);
                },
                fail(res) {}
            });
        },
        // 跳转到列表明细
        toRewards() {
            uni.navigateTo({
                url: `/subpkg_test/fenxiang2`
            });
        },
        // 分享按钮
        btn() {
            // #ifdef APP
            uni.share({
                provider: 'weixin',
                scene: 'WXSceneSession',
                type: 0,
                href: `http://test-wap.zheshouka.com/pages/login/register?referee=${this.tuigId}`,
                title: '邀请有礼',
                summary: '邀请好友注册并销卡，即可获得奖励哦！',
                imageUrl: 'https://uapi.zheshouka.com/static/uniapp/img/logo.png',
                success: function (res) {
                    console.log('success:' + JSON.stringify(res));
                },
                fail: function (err) {
                    console.log('fail:' + JSON.stringify(err));
                }
            });
            // #endif
        }
    }
};
</script>

<style lang="scss" scoped>
.publish::after {
    border: none;
}

.wai {
    // padding: 30.77rpx;
    height: 100vh;
    .pojaib {
        position: relative;
        .yaoid {
            position: absolute;
            bottom: 13%;
            left: 44%;
            color: #ff0c0c;
            font-size: 32rpx;
        }
        .yaoqing {
            position: absolute;
            bottom: 21%;
            left: 43%;
            font-size: 30rpx;
            color: #fff;
        }
        .erweima {
            position: absolute;
            // top: 38%;
            // left: 38%;
            width: 190rpx;
            height: 190rpx;
        }
        .image {
            width: 100%;
            height: 800rpx;
        }
    }
    // 图标
    .icon-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 40rpx;
        position: fixed;
        bottom: 0;
        width: 100%;
        .icon-items {
            // margin-top: 80rpx;
            // margin-right: 150rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            &:last-child {
                margin-right: 0;
            }
            .item-picture {
                width: 60rpx;
                height: 60rpx;
                margin-bottom: 30rpx;
                // background-color: rebeccapurple;
            }
            .share-box {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
        }
    }
}
</style>
